<!-- 雨量预报分布图 -->
<!-- 初步完成 2024-10-8 -->
<template>
    <div class="container">
        <div style="display: flex; align-items: center; padding: 10px; color: #fff;">
            <span style="margin-right: 20px; font-weight: bold;">天气实况监测</span>
            <span style="margin-right: 20px;">|</span>
            <span style="display: flex; align-items: center;">
                <span>雨量预报分布图</span>
            </span>
        </div>
        <div class="content">
            <img :src="imgUrl" alt="">
        </div>

    </div>
</template>

<script>
import { reqRadarPic } from '@/api/monitor/index.js'
export default {
    name: 'rainfall_forecast_map',
    data() {
        return {
            imgUrl: ''
        }
    },
    mounted() {
        this.getRain1hPic()
    },
    methods: {
        // 获取图片
        async getRain1hPic() {
            let res = await reqRadarPic()
            if (res.status === 200) {
                this.imgUrl = res.data.data[2].minioUrl
            }
            else {

                this.$message.error(res.msg)
            }

        }
    },
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100%;

    .content {
        width: 100%;
        height: 95%;
        display: flex;
        justify-content: center;
        align-items: center;

    }
}
</style>